<template>
    <el-col>
        <div style="float:left" class="head">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item>
                    <el-input placeholder="请输入名称" v-model="select"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="SelectName()">搜索</el-button>
                    <router-link to="/home/addGoods">
                        <el-button type="primary" icon="el-icon-search">
                            添加
                        </el-button>
                    </router-link>
                </el-form-item>
            </el-form>
        </div>
        <div style="float:left">
            <el-dropdown trigger="click">
                <el-avatar class="el-avatar--icon" :src="this.$store.state.user.HeadPicture"></el-avatar>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-plus" @click.native="DropLogin('a')">退出登录</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-share" @click.native="$refs.file.click()" type="primary">
                        更换头像
                    </el-dropdown-item>
                    <input type="file" id="el1" ref="file" @change="onFileChange" style="display: none" />
                    <!-- <el-dialog a -->
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </el-col>

</template>

<script>
export default {
    data() {
        return {
            select: ' '
        }
    },
    methods: {
        visible_change() {
            const visiblechange = document.querySelector('el-dropdown')
            console.log(visiblechange.data);

        }, DropLogin(a) {
            this.$router.replace({ path: '/' })
        },
        SelectName() {
            console.log('select' + this.select);
            if (this.select.length > 1) {
                this.$store.state.Goods.array = this.$store.state.Goods.tableData.filter(res => {
                    return res.id == this.select
                });
            } else if (this.select.length <= 1) {
                console.log(this.$store.state.Goods.tableData);
                this.$store.state.Goods.array = this.$store.state.Goods.tableData
            }
        },
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        AddGoods() {
            this.$router.replace({ path: '/home/addGoods' })
        },
        onFileChange(e) {
            const file = e.target.files[0];
            if (!file) {
                return;
            }
            const reader = new FileReader();
            reader.onload = (e) => {
                this.$store.state.user.HeadPicture = e.target.result;
            };
            reader.readAsDataURL(file);
            // 如果需要上传到服务器，可以在reader.onload之后添加上传代码
        },
    }
}
</script>

<style scoped>
.el-avatar--icon {
    font-size: 18px;
    margin-left: 750px;
}

.head {
    margin-left: 160px;
}
</style>